<template>
  <div>
    <Row>
      <i-col span="24" class="operation_item y_query_right">
        <Input v-model.trim="tParam.subject" placeholder="标题关键字" style="min-width: 220px" clearable class="y_condition"></Input>
        <Input v-model.trim="tParam.virtualName" placeholder="用户编号或收件人邮箱" style="min-width: 170px;" clearable class="y_condition"></Input>
        <DatePicker placeholder="开始时间" type="datetime" v-model="tParam.startTime" format="yyyy-MM-dd HH:mm"
                    style="min-width: 150px" class="y_condition"></DatePicker>
        -
        <DatePicker placeholder="截止时间" type="datetime" v-model="tParam.endTime" format="yyyy-MM-dd HH:mm"
                    class="y_condition"></DatePicker>
        <Button type="primary" icon="md-search" @click="search()" class="y_condition">查询</Button>
        <Button type="info" icon="ios-send-outline" @click="sendEmail()" v-has=tRole.EMAIL_2_101 class="y_condition">写邮件</Button>
      </i-col>
    </Row>

    <Row justify="end" v-has=tRole.EMAIL_1_103>
      <i-col style="margin-bottom: -2rem;position:absolute;z-index:999;">
<!--        <Checkbox v-model="tParam.isAll"  class="y_condition" style="min-width: 250px">查询全部</Checkbox>-->

      </i-col>
    </Row>
    <List>
      <ListItem style="display: flex;flex-direction: column;align-items: flex-start;margin-left: 28px;">
        <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
      </ListItem>
      <CheckboxGroup v-model="messageSelected" @on-change="checkChange">
        <list-item class="list_item" v-for="(item,index) in tData.emailList">
          <div style="width:100%;padding: 0 0.5rem;"  >
            <Row style="cursor: pointer" justify="start">
              <i-col :xs="2" :sm="1">
                <Checkbox :label="item.id" :value="index">{{ check }}</Checkbox>
              </i-col>
              <i-col :xs="22" :sm="23" style="text-align: left;" @click.native="showEmail(index)">
                <p style="font-weight: 500;font-size: 0.8rem">{{ item.subject }}</p>
                <p  v-if="item.text!=null" class="base_key" style="margin-top: 0.3rem">{{ item.text.substring(0, 80) }}</p>
              </i-col>
            </Row>
            <Row justify="end" >
              <i-col>
                <KeyValueView v-if="item.encodeName!=null" title="用户" :value="item.encodeName"></KeyValueView>
                <KeyValueView title="发送员工" @click.stop>{{ item.employeeName }}</KeyValueView>
                <KeyValueView title="收件邮箱" @click.stop>{{ item.virtualName }}</KeyValueView>

                <Tag color="red" v-if="item.tags!=null && item.tags.length>0">
                  {{parseTags(item.tags).join(",")}}
                </Tag>
                <KeyValueView title="时间">{{ $tiyBJTime(new Date(item.createTime).getTime()) }}</KeyValueView>
              </i-col>

            </Row>
          </div>
        </list-item>
      </CheckboxGroup>
    </List>

    <div style="float: right;">
      <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[20,40,60,100]"
            show-sizer show-elevator/>
    </div>

    <!-- 邮件详情 -->
    <Modal
      v-model="tStatus.showEmail.isShowing"
      title="邮件详情"
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'65%'}">
      <AEmailDetail :sys-email="0" v-bind="tData.emailDetail"
                    @again="again" ref="AEmailDetail"></AEmailDetail>
      <div slot="footer"></div>
    </Modal>

    <!-- 发送邮件 -->
    <Modal
      v-model="tStatus.replayEmail.isShowing"
      title=""
      :mask-closable="false"
      :styles="{top: '20px',bottom:'20px',width:'80%'}">
      <send-email v-bind:receiveUser="tParam.email.selectedUsers" v-bind:isRefresh=false
                  v-on:listenSendEmailEvent="sendSuccess" :is-send=isSend ref="sendEmail"></send-email>
      <div slot="footer"></div>
    </Modal>


  </div>
</template>

<script>
import tiyData from "./js/sendEmail/send_data";
import {webList, showEmail, again} from "./js/sendEmail/send_fun";
import AEmailDetail from "../email/SendEmailDetail.vue"
import SendEmail from "../email/SendEmailTemplate.vue"
import KeyValueView from "../widgets/KeyValueView";

export default {
  data() {
    return {
      tRole:{
        EMAIL_1_103:"EMAIL-1-103",
        EMAIL_2_101:"EMAIL-2-101",
        COMMON_1_100:"COMMON-1-100",
      },
      page: tiyData.tPage,
      tParam: tiyData.tParam,
      tData: tiyData.tData,
      tStatus: tiyData.tStatus,
      check: '',
      isSend:false,
      selectedIndex: 0,
      isCheckedAllMessage: false,
      messageSelected: [],
    }
  },
  components: {KeyValueView, AEmailDetail, SendEmail},
  props:{
    sysEmail:Number,
  },
  methods: {
    search() {
      webList(this, tiyData);
    },
    showEmail(index) {
      if(this.$authority("EMAIL-2-201")) { //有权限才能查看邮件详情
        this.selectedIndex = index;
        showEmail(this, tiyData, index)
      }
    },
    again() {
      this.$refs.sendEmail.$data.fileList.splice(0,this.$refs.sendEmail.$data.fileList.length);
      this.$refs.sendEmail.$data.receiverEmail='';
      this.isSend=false;
      again(this, tiyData, this.selectedIndex);
    },
    sendEmail(){
      this.$refs.sendEmail.$data.fileList.splice(0,this.$refs.sendEmail.$data.fileList.length);
      this.$refs.sendEmail.$data.receiverEmail='';
      this.$refs.sendEmail.email.title='';
      this.$refs.sendEmail.email.content='';
      tiyData.tParam.email.selectedUsers.splice(0,tiyData.tParam.email.selectedUsers.length);
      this.isSend=true;
      this.tStatus.replayEmail.isShowing=true;
    },
    sendSuccess(isSuccess) {
      if (isSuccess) {
        tiyData.tStatus.replayEmail.isShowing = false;
      }
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(page) {
      tiyData.tPage.stepNumber = page;
      webList(this, tiyData);
    },
    checkChange(val) {
      if (this.messageSelected.length == this.tData.emailList.length) {
        this.isCheckedAllMessage = true;
      } else {
        this.isCheckedAllMessage = false;
      }
    },
    handleCheckAll() {
      let self = this;
      if (this.isCheckedAllMessage) {
        this.messageSelected.splice(0, this.messageSelected.length);
        for(let i=0;i<this.tData.emailList.length;i++){
          self.messageSelected.push(this.tData.emailList[i].id);
        }
      } else {
        this.messageSelected.splice(0, this.messageSelected.length);
      }
    },
  },
  created() {
      tiyData.tParam.isAll = false;
  }
}
</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";

.list_value {
  font-size: 13px;
  color: @tiyTextDescColor;
  padding-right: 1rem;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
